<template>
  <div class="main">
    <van-sticky>
      <div class="nav">
        <img :src="back" alt="" @click="handleBack"/>
        <div>用户服务协议</div>
      </div>
    </van-sticky>
    <div class="body">
      <div class="title">{{ userAgreementList.amName }}</div>
      <div class="date">更新日期:{{ userAgreementList.updateTime }}</div>
      <div class="date">生效日期:{{ userAgreementList.amName }}</div>
      <div v-html="userAgreementList.amContent"></div>
    </div>
  </div>
</template>

<script>
import {getAgreement} from '@/api/my.js'

export default {
  name: "userServiceAgreement",
  data() {
    return {
      back: require("@/assets/my/back.png"),
      userAgreementList: {}
    }
  },
  mounted() {
    this.getAgreement()
  },
  methods: {
    handleBack() {
      this.$router.go(-1);
    },
    getAgreement() {
      let data = {
        amType: 3,
        language: 'zh-cn'
      }
      getAgreement(data).then(res => {
        this.userAgreementList = {...res.data}
        console.log('----------', this.userAgreementList)
      })
    }
  }
}
</script>

<style scoped lang="less">
.main {
  height: 100vh;
  overflow-y: auto;

  .nav {
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(242, 150, 0, 1);
    color: #ffffff;
    font-size: 20px;
    font-weight: 500;

    > img {
      width: 10px;
      height: 16px;
      position: absolute;
      left: 15px;
    }
  }

  .body {
    padding: 15px;

    .title{
      font-size: 20px;
      font-weight: 500;
      letter-spacing: 0px;
      line-height: 28.96px;
      color: rgba(0, 0, 0, 1);
      text-align: center;
    }
    .date{
      font-size: 17px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 24.62px;
      color: rgba(0, 0, 0, 1);
      text-align: left;
      vertical-align: top;
    }
  }
}
</style>
